<!-- 登录 -->
<template>
  <div class="login_box">
    <div class="h50">
      <my-tab-bar
        :title="isLogin ? '登录' : '注册'"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      ></my-tab-bar>
    </div>
    <van-form @submit="onSubmit" >
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <Verify
        :showButton="false"
        @success="success"
        @error="error"
        :type="2"
        ref="qqq"
      ></Verify>
     
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">{{
          isLogin ? "登录" : "注册"
        }}</van-button>
      </div>
    </van-form>
    <span @click="isLogin = !isLogin">{{
      isLogin ? "立即注册" : "已有登录账号"
    }}</span>
    <SocialSignin/>
  </div>
  
</template>

<script>
    import {
        login,
        register
    } from "../api";
    import {
        Dialog,
        Notify
    } from "vant";
    import Verify from "vue2-verify";
    import md5 from "js-md5";
    import SocialSignin from "../components/login/socialSignin";
    export default {
        data() {
            return {
                isLogin: true,
                username: "",
                password: "",
            };
        },
        components: {
            Verify,
            SocialSignin,
            // goodsList
        },
        created() {},
        mounted() {
            // 定时器
            this.timer = setInterval(this.qqLogin, 3000);
        },
        methods: {
            onSubmit() {
                this.$refs.qqq.checkCode(); //用户名密码校验通过后 校验验证码
            },
            onClickLeft() {},
            success() {
                if (this.isLogin) {
                    login({
                        loginName: this.username,
                        passwordMd5: md5(this.password),
                    }).then((data) => {
                        if (data.resultCode == 200) {
                            this.timer = null;
                            this.$store.commit('updateToken', data.data);
                            this.$router.push('/')
                            this.$store.dispatch('updateCartNum')
                        }
                    });
                } else {
                    register({
                        loginName: this.username,
                        password: this.password,
                    }).then((data) => {
                        if (data.resultCode == 200) {
                            Dialog.alert({
                                title: "提示",
                                message: "注册成功，请登录",
                                theme: "round-button",
                            }).then(() => {
                                this.isLogin = true;

                                obj.refresh(); //刷新验证码
                            });
                        }
                    });
                }
            },
            error() {
                Notify({
                    type: "danger",
                    message: "验证码错误",
                    duration: 500
                });
            },
            // QQ第三方登录
            qqLogin() {
                var that = this; // 先将vue这个对象保存在_self对象中
                //检查是否登录
                if (QC.Login.check()) {
                    //该处的openId，accessToken就是后台需要的参数了，后台通过这些参数拿取临时登录凭证，然后就是自己的逻辑了
                    QC.Login.getMe(function(openId, accessToken) {
                        if (openId != undefined) {
                            // 获取头像信息 等等
                            // QC.api(api, paras, fmt, method)
                            QC.api('get_user_info').success(res => {
                                avatar.value = res.data.figureurl_1
                                nickname.value = res.data.nickname
                            })
                            that.loading = true;
                            // 传参给后台进行登录验证
                            that.$store.dispatch('LoginByUsername', {
                                username: '',
                                openId: openId,
                                accessToken: accessToken
                            }).then(() => {
                                that.loading = false;
                                // that.$router.push({ path: that.redirect || '/' })
                                that.$router.push({
                                    path: '/'
                                })
                            }).catch(() => {
                                that.loading = false
                            })
                        }
                    });
                    console.log('已登录!')
                        // 清除定时器
                    clearInterval(this.timer);
                    this.timer = null;
                } else {
                    console.log('未登录!')
                }
            },
        },
    };
</script>
<style lang='less' scoped>
    .login_box {
        height: 100%;
        width: 100%;
        background: url(../assets/login/login-bg.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .van-form {
            .van-cell {
                background-color: transparent;
            }
            .cerify-code-panel {
                height: 100%;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: 20px 0;
                align-items: center;
                /* .verify-code {
                    width: 100px;
                    height: 30px;
                    line-height: 60px;
                    font-size: 20px;
                    background-color: rgb(240, 255, 255);
                    color: rgb(102, 204, 102);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 10px;
                } */
            }
        }
    }
</style>